<html>
	<head>
		<style>
			table{background-image:url(./images/beijing.jpg);margin: 0 auto;}
			table caption{font-family:'微软雅黑';font-size:30px;}
			table td{width:100px;height:100px;}
			img{margin-top:31px;}
			#aa{margin-top:0px;}
			#bb{margin-top:3px;}
			body{cursor:pointer;}
		</style>
	</head>
	<body>
		<table>
			<caption>打地鼠</caption>
			<tr>
				<td><img src="./images/keng.gif"/></td>
				<td><img src="./images/keng.gif"/></td>		
				<td><img src="./images/keng.gif"/></td>
			</tr>
			<tr>
				<td><img src="./images/keng.gif"/></td>
				<td><img src="./images/keng.gif"/></td>		
				<td><img src="./images/keng.gif"/></td>
			</tr>
			<tr>
				<td><img src="./images/keng.gif"/></td>
				<td><img src="./images/keng.gif"/></td>		
				<td><img src="./images/keng.gif"/></td>
			</tr>
		</table>
		<p id="zong">分数:0分</p>
	
			
	
		
	</body>
	<script>
		// 随机数  

		// 获取元素   然后 修改元素的属性  

		// 操作元素的属性 

		// 定时器   


		// 让地鼠出来  
		var nums; 
		var sum = 0;
		var imgs = document.querySelectorAll('img');
		setTimeout(mao,100);

		function mao(){
			nums = Math.floor(Math.random()*9);
			imgs[nums].src = './images/dishu.gif';
			imgs[nums].setAttribute('onclick',"da()")
			// 冒出来 停留一会  回去  定时器
			imgs[nums].style.marginTop = '0px';
			setTimeout(hui,Math.random()*400+800)
		}

		// setInterval(mao,500);

		function hui(){
			imgs[nums].src = './images/keng.gif'
			imgs[nums].removeAttribute('onclick');
			imgs[nums].style.marginTop = '30px';//
			setTimeout(mao,Math.random()*400+800);
		}

		function da(){
			imgs[nums].src = './images/shang.gif';
			imgs[nums].removeAttribute('onclick');
			sum += 10;
			document.querySelector('p').innerHTML = `分数:${sum}分`
		}
		

		
	</script>
</html>